<script setup>
import MostHeader from '@/components/MostHeader.vue';

import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
const listData = [];
for (let i = 0; i < 23; i++) {
    listData.push({
        href: 'https://www.antdv.com/',
        title: `ant design vue part ${i}`,
        avatar: 'https://joeschmoe.io/api/v1/random',
        description:
            'Ant Design, a design language for background applications, is refined by Ant UED Team.',
        content:
            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    });
}
const pagination = {
    onChange: page => {
        console.log(page);
    },
    pageSize: 10,
};
const actions = [
    {
        icon: StarOutlined,
        text: '156',
        classname: 'star'
    },
    {
        icon: LikeOutlined,
        text: '156',
        classname: 'like'
    },
    {
        icon: MessageOutlined,
        text: '2',
        classname: 'comment'
    },
];
</script>

<template>
    <div class="container">
        <MostHeader />

        <div class="comment">
            <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
                <template #renderItem="{ item }">
                    <a-list-item key="item.title" style="height: 25vh;">
                        <template #actions>
                            <span v-for="{ icon, text, classname } in actions" :key="icon" :class="classname">
                                <component :is="icon" style="margin-right: 8px" />
                                {{ text }}
                            </span>
                        </template>
                        <template #extra>
                            <img width="240" alt="logo"
                                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
                        </template>
                        <a-list-item-meta :description="item.description">
                            <template #title>
                                <a :href="item.href">{{ item.title }}</a>
                            </template>
                            <template #avatar><a-avatar :src="item.avatar" /></template>
                        </a-list-item-meta>
                        {{ item.content }}
                    </a-list-item>
                </template>
            </a-list>
        </div>
    </div>
</template>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comment {
    margin-top: 10px;
    margin-bottom: 20px;
}
</style>